<html>
    <head>
        <title>我的第一个网页</title><!--定义网页标题，会显示在浏览器标签页上-->
        <!--
        第一步：先导入vue.js,所以在head中导入
        第二步：定义一个标签，来接管标签中的内容
        第三步：创建vue实例，让vue实例获取到这个标签HTML
        -->
        <!--引用Vue.js库(这一步是使用 Vue 的前提，相当于把 Vue 框架的代码加载到当前页面中，让浏览器能识别 Vue 的语法)-->
        <!-- 替换head中的Vue引入代码 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    </head>
    <body>
    <div id="app"><!--这是一个普通的 HTML 标签，但通过id="app"标识，后续会被 Vue 实例 "接管"-->
        <!--这里HTML的相关内容-->
        <!-- {{}} 语法形式：胡子语法，作用是将 Vue 实例中的数据渲染到页面上-->
        {{ message }}<!--这里的message是一个变量名，对应 Vue 实例中data里定义的数据-->
        <p>{{ info }}</p>
        <!-- <p>[[ info ]]</p> //将标签修改为[[]]后运行 -->
        {{ message }}{{ info }}<!--输出的结果是  Hello Vue!请登录  （两个内容连在一起）
                            <p> 是 HTML 的 “段落标签”，把 {{ info }} 包在 <p> 里，
                            就相当于给这个数据 “装了个盒子”，后续可以通过 CSS 控制这个盒子的样式。-->

        <a href="https://www.baidu.com">百度</a> <!--a标签是HTML中超链接标签，用于实现页面之间的跳转，href属性是链接地址-->
        <a v-bind:href="next">百度</a><!--动态绑定超链接地址：将即将跳转的网址定义为一个变量
                                        v-bind: 是 Vue 的指令作用是 “动态绑定属性”，可以缩写成 :href（更常用）-->
        <hr> <!--hr标签是HTML中的水平线标签，用于在页面中添加水平线-->
        <!--v-if根据条件 “个人中心 / 登录” 标签,v-else与v-if搭配实现 “二选一” 显示。 -->
        <a href="#" v-if="isLogin">个人中心</a>
        <a href="#" v-else>登录</a>
        <hr>
        <!--v-else-if实现 “多选一” 显示 -->
        <a href="#" v-if="level===0">游客</a>
        <a href="#" v-if="level===1">普通用户</a>
        <a href="#" v-else-if="level===2">高级用户</a>
        <a href="#" v-else>管理者</a>
        <hr>
        <!-- v-show 对应的标签是存在的,v-if 对应的标签在变量为true时才显示-->
        <!--v-if是 “条件渲染”（DOM 存在 / 不存在），v-show是 “条件显示”（DOM 始终存在，仅通过 CSS 的display: none控制隐藏）-->
        <span v-if="seen">if</span>
        <span v-show="seen">show</span>
        <hr>
        <ul>
            <!-- v-for="变量名 in 列表变量名"-->
            <li v-for="shop in shops">{{ shop }}</li>
            <!-- v-for="(列表元素,索引) in 列表变量名"-->
            <li v-for="(shop,index) in shops">第{{ index+1 }}家商店：{{ shop }}</li>
        </ul>
        <hr>
        <button v-on:click="counter+=1">增加</button>
        <button v-on:click="changeMessage">修改信息</button>
        <button v-on:click="login">登录</button>
        <button v-on:click="sayHi('你好')">打招呼</button>
        <p>{{ message }}</p><!--查看修改后的message-->
        <p>{{ counter }}</p><!--查counter对应的值-->
    </div>
    </body> 
    <!--创建 Vue 实例-->
    <script type="text/javascript">
        /*
            var app 定义一个变量
            new Vue() 实例化
            e1：'#app'  相当于 js document.getElementById('app')
                获取div标签
            data:变量
        */
        var app = new Vue({
            //el是 "element" 的缩写，意为 "挂载点"
            //'#app'是 CSS 选择器，对应页面中id="app"的标签（即上面的<div>）
            //作用：让当前 Vue 实例只管理这个标签内部的内容（标签外的内容不受 Vue 控制）
                el: '#app',
                //delimiters:['[[',']]'], //delimiters：中文意思为分隔符 ['开始的分隔符',' 结束的分隔符'] 
                                          //修改双大括号，防止与angular冲突
            data: {
                message: 'Hello Vue!',//变量名：值
                info:'请登录',
                next:'https://www.baidu.com',
                isLogin:true,
                level:1,
                seen:false,
                shops:['小米','华为','苹果','OPPO','VIVO'],
                counter:0
            },
            methods:{
                changeMessage:function(){
                    //this.message = ... 是给 Vue 实例的响应式变量赋值
                    this.message='Hello World!';
                },
                login:function(){
                    //alert() 是 JavaScript 内置的弹窗函数，作用是在浏览器中弹出一个包含指定内容的提示框
                    alert('登录成功');
                },
                sayHi:function(message){
                    alert(message);
                }
            }

        })
</script>
</html>
